<template>
	<div class="w750" style="position: static;">
		<!-- 修改资料 -->
		<div class="modify">
			<!-- 修改姓名 -->
			<div v-if="$route.query.type == 'name'">
				<div class="item">
					<input type="text" class="item-input" placeholder="请输入您的姓名" v-model="newName" />
					<i class="clear-info" @click="clearTxt"><img src="../../assets/images/info-clear.png" alt /></i>
				</div>
				<div class="item-tip">2-20位中文字符</div>
				<div class="b-btn" :class="themes.theme"><span class="btn-r" @click="changeName">保存</span></div>
			</div>
			<!-- /修改姓名 -->
			<!-- 修改昵称 -->
			<div v-if="$route.query.type == 'nickname'">
				<div class="item">
					<input type="text" class="item-input" placeholder="请输入您的昵称" v-model="newNickname" />
					<i class="clear-info" @click="clearTxt"><img src="../../assets/images/info-clear.png" alt /></i>
				</div>
				<div class="item-tip">2-20位数字、中文、字母和特殊字符(仅限!@#$%^&*())</div>

				<div class="b-btn" :class="themes.theme"><span class="btn-r" @click="changeNickname">保存</span></div>
			</div>
			<!-- /修改昵称 -->
			<!-- 修改登录密码 -->
			<div v-if="$route.query.type == 'loginpwd'">
				<div class="item"><input type="text" class="item-input" v-model="phone" readonly unselectable="on" /></div>
				<div class="item">
					<input type="text" class="item-input" placeholder="请填写短信验证码" v-model="code" maxlength="6" />
					<getvali-date codeType="updatePasswd" :codeMobile="phone" :class="'send-code'" ref="getvali" />
				</div>
				<div class="item"><input type="password" class="item-input" placeholder="新密码" v-model="newPwd" maxlength="20" /></div>
				<div class="item"><input type="password" class="item-input" placeholder="确认密码" v-model="surePwd" maxlength="20" /></div>
				<div class="item-tip">密码由6-20位字母、数字或符号(除空格)组成</div>
				<div class="b-btn" :class="themes.theme"><span class="btn-r" @click="changeLoginpwd">确认修改</span></div>
			</div>
			<!-- /修改登录密码 -->
			<!-- /修改支付密码  暂时先屏蔽-->
			<!-- <div v-if="$route.query.type == 'paypwd'">
				<div class="item"><input type="text" class="item-input" v-model="phone" readonly unselectable="on"></div>
				<div class="item">
					<input type="text" class="item-input" placeholder="请填写短信验证码" v-model="code" maxlength="6">
		      		<div class="send-code" @click.prevent="getVerifyCode('updatePayPasswd')">{{countDown == 0 ? '发送验证码' : '重新发送'+(countDown)+'秒'}}</div>
				</div>
				<div class="item"><input type="password" class="item-input" placeholder="新密码" v-model="newPwd" maxlength="20"></div>
				<div class="item"><input type="password" class="item-input" placeholder="确认密码" v-model="surePwd" maxlength="20"></div>
				<div class="item-tip">密码由6-20位字母、数字或符号(除空格)组成</div>
				<div class="b-btn" :class="themes.theme"><span class="btn-r" @click="changePaypwd">确认修改</span></div>
      </div>-->
			<!-- /修改支付密码 -->
			<!-- 修改手机号 -->
			<div v-if="$route.query.type == 'phone'">
				<div>
					<div class="item"><input type="text" class="item-input" placeholder="请输入原手机号" v-model="phone" readonly /></div>
					<div class="item"><input type="text" class="item-input" placeholder="请输入新手机号" v-model="newPhone" maxlength="11" /></div>
					<div class="item">
						<input type="text" class="item-input" placeholder="请填写短信验证码" v-model="newCode" maxlength="6" />
						<getvali-date codeType="bindPhone" :codeMobile="newPhone" :class="'send-code'" />
						
						<!-- <input type="text" class="item-input" placeholder="请填写短信验证码" v-model="code" maxlength="6" />
						<getvali-date codeType="other" :codeMobile="phone" :class="'send-code'" ref="getvali" /> -->
						<!-- <getvali-date codeType="other" :codeMobile="phone" :class="'send-code'" ref="getvali" /> -->
					</div>
					<div class="b-btn" :class="themes.theme" @click="sure"><span class="btn-r">确认</span></div>
					<!-- <div class="b-btn" :class="themes.theme" @click="next">
						<span class="btn-r">下一步</span>
					</div> -->
				</div>
				<!-- <div v-show="!nextType">
					<div class="item"><input type="text" class="item-input" placeholder="请输入新手机号" v-model="newPhone" maxlength="11" /></div>
					<div class="item">
						<input type="text" class="item-input" placeholder="请填写短信验证码" v-model="newCode" maxlength="6" />
						<getvali-date codeType="bindPhone" :codeMobile="newPhone" :class="'send-code'" />
					</div>
					<div class="b-btn" :class="themes.theme" @click="sure"><span class="btn-r">确认</span></div>
				</div> -->
			</div>
			<!-- /修改手机号 -->
		</div>
		<!-- /修改资料 -->
	</div>
</template>

<script>
import HeadBox from 'components/headBox/headBox';
import getvaliDate from 'components/getvaliDate/getvaliDate';
import { sendSMSCode } from 'api/common/common';
import { mapState } from 'vuex';
import { tokenManage } from 'utils/Cache';
import formCheck from 'utils/formCheck';
import { editLoginPwd, editPhone, editNickname, editPayPwd, editName, verifyPhoneCode, isPhoneExist, updateMobile } from 'api/account';

export default {
	data() {
		return {
			newName: this.$route.query.name, //修改姓名
			newNickname: this.$route.query.name, //修改昵称
			countDown: 0, // 倒计时
			stopTime: 0,
			phone: this.$route.query.name, //手机号
			code: '', //验证码
			newPwd: '', //新密码
			surePwd: '', //确认密码
			newPhone: '', //新手机
			newCode: '', //新验证码
			// nextType: true //下一步
		};
	},
	mounted() {
		let that = this;
		document.title = this.$route.query.title;
	},
	methods: {
		goback() {
			this.$router.back();
			this.$router.isBack = true;
		},
		//清除已填的内容
		clearTxt() {
			if (this.newName) {
				this.newName = '';
			} else if (this.newNickname) {
				this.newNickname = '';
			} else {
				this.$toast('没有内容可以清除');
			}
		},
		//修改名称
		changeName() {
			if (formCheck.nameRight(this.newName, '请输入2到20位中文字符')) {
				this.$toast('2到20位中文字符');
				return;
			}
			this.$utils.uDebounce(() => {
				editName({ realName: this.newName }).then(res => {
					if (res.status == 1) {
						this.editName = res.result;
						this.$router.isBack = true;
						this.goback();
						this.$toast('修改成功');
					} else {
						this.$toast(res.msg);
					}
				});
			});
		},

		//修改昵称
		changeNickname() {
			if (formCheck.nicknameRight(this.newNickname, '2-20位数字、中文、字母和特殊字符(仅限!@#$%^&*())作为昵称1')) {
				this.$toast('2-20位数字、中文、字母和特殊字符(仅限!@#$%^&*())作为昵称');
				return;
			}
			this.$utils.uDebounce(() => {
				editNickname({ nickName: this.newNickname }).then(res => {
					if (res.status == 1) {
						this.editNickname = res.result;
						this.$router.isBack = true;
						this.goback();
						this.$toast('修改成功');
					} else {
						this.$toast(res.msg);
					}
				});
			});
		},
		//修改登录密码
		changeLoginpwd() {
			let errorMsg =
				formCheck.isNonEmpty(this.phone, '请输入手机号') ||
				formCheck.phoneRight(this.phone, '请输入正确的手机号码') ||
				formCheck.isNonEmpty(this.code, '请输入验证码') ||
				formCheck.isNonEmpty(this.newPwd, '请输入新密码') ||
				formCheck.pwdRig(this.newPwd, '密码应为6-20位字母、数字和标点符号的组合') ||
				formCheck.isNonEmpty(this.surePwd, '请再次输入密码') ||
				formCheck.isEqual(this.newPwd, this.surePwd, '两次密码不一致');

			if (errorMsg) {
				this.$toast(errorMsg);
				return;
			}
			this.$utils.uDebounce(() => {
				editLoginPwd({
					mobileCode: this.code,
					newPwd: this.newPwd
				}).then(res => {
					if (res.status == 1) {
						this.$toast('修改成功');
						this.goback();
					} else {
						this.$toast(res.msg);
					}
				});
			});
		},
		//修改支付密码
		changePaypwd() {
			this.$utils.uDebounce(() => {
				let errorMsg =
					formCheck.isNonEmpty(this.phone, '请输入手机号') ||
					formCheck.phoneRight(this.phone, '请输入正确的手机号码') ||
					formCheck.isNonEmpty(this.code, '请输入验证码') ||
					formCheck.isNonEmpty(this.newPwd, '请输入新密码') ||
					formCheck.PwdRig3(this.newPwd, '密码应为6-20位字母、数字或标点符号，不含空格') ||
					formCheck.isNonEmpty(this.surePwd, '请再次输入密码') ||
					formCheck.isEqual(this.newPwd, this.surePwd, '两次密码不一致');

				if (errorMsg) {
					this.$toast(errorMsg);
					return;
				}

				editPayPwd({
					mobile: this.phone,
					mobileCode: this.code,
					paymentPassword: this.newPwd
				}).then(res => {
					if (res.status == 1) {
						this.$toast('修改成功');
						if (this.$route.query.subNumber) {
							this.$router.replace({
								path: `/payOrder`,
								query: {
									subNumber: this.$route.query.subNumber,
									totalAmount: this.$route.query.totalAmount
								}
							});
						} else {
							this.goback();
						}
					} else {
						this.$toast(res.msg);
					}
				});
			});
		},
		//修改手机号第一步
		// next() {
		// 	if (!this.code) {
		// 		this.$toast('请输入验证码');
		// 		return;
		// 	}
		// 	this.$utils.uDebounce(() => {
		// 		let params = {
		// 			code: this.code,
		// 			phoneNumber: this.phone
		// 		};
		// 		verifyPhoneCode(params).then(res => {
		// 			if (res.status == 1) {
		// 				this.$refs.getvali.clearTimer();
		// 				this.nextType = !this.nextType;
		// 			} else {
		// 				this.$toast({
		// 					message: res.msg
		// 				});
		// 			}
		// 		});
		// 	});
		// },
		//修改手机号第二步
		sure() {
			let errorMsg =
				formCheck.isNonEmpty(this.newPhone, '请输入手机号') ||
				formCheck.phoneRight(this.newPhone, '请输入正确的手机号码') ||
				formCheck.isNonEmpty(this.newCode, '请输入验证码');

			if (errorMsg) {
				this.$toast(errorMsg);
				return;
			}
			this.$utils.uDebounce(() => {
				isPhoneExist({ phone: this.newPhone })
					.then(res => {
						if (res.result == false) {
							return updateMobile({
								mobile: this.newPhone,
								mobileCode: this.newCode
							});
						} else {
							this.$toast('手机已存在');
						}
					})
					.then(res => {
						if (res.status == 1) {
							this.$toast('修改手机号成功');
							this.goback();
						} else {
							this.$toast(res.msg);
						}
					});
			});
		}
	},
	computed: {
		...mapState(['themes'])
	},
	components: {
		HeadBox,
		getvaliDate
	}
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/account.css" scoped></style>
